<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
  </head>
  <body>
    <div id="app">
      <div class="view view-main">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="left"></div>
              <div class="title">Dialog</div>
              <div class="right"></div>
            </div>
          </div>
          <div class="page-content"><div class="block block-strong">
<p class="row">
<button class="col button open-alert">Alert</button>
<button class="col button open-confirm">Confirm</button>
<button class="col button open-prompt">Prompt</button>
</p>
<p class="row">
<button class="col button open-login">Login</button>
<button class="col button open-password">Password</button>
</p>
</div>
<div class="block-title">Vertical Buttons</div>
<div class="block block-strong">
<p>
<button class="button open-vertical">Vertical Buttons</button>
</p>
</div>
<div class="block-title">Preloader Dialog</div>
<div class="block block-strong">
<p class="row">
<button class="col button open-preloader">Preloader</button>
<button class="col button open-preloader-custom">Custom Title</button>
</p>
</div>
<div class="block-title">Progress Dialog</div>
<div class="block block-strong">
<p class="row">
<button class="col button open-progress">Determined</button>
<button class="col button open-progress-infinite">Infinite</button>
</p>
</div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      var plugin = {
        params: {
          theme: theme,
          root: '#app',
        }
      };
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
    </script>
    <script>
      var app = new Framework7();
      
      var $$ = Dom7;
      
      // Alert
      $$('.open-alert').on('click', function () {
        app.dialog.alert('Hello');
      });
      
      // Confirm
      $$('.open-confirm').on('click', function () {
        app.dialog.confirm('Are you feel good today?', function () {
          app.dialog.alert('Great!');
        });
      });
      
      // Prompt
      $$('.open-prompt').on('click', function () {
        app.dialog.prompt('What is your name?', function (name) {
          app.dialog.confirm('Are you sure that your name is ' + name + '?', function () {
            app.dialog.alert('Ok, your name is ' + name);
          });
        });
      });
      
      // Login
      $$('.open-login').on('click', function () {
        app.dialog.login('Enter your username and password', function (username, password) {
          app.dialog.alert('Thank you!<br>Username:' + username + '<br>Password:' + password);
        });
      });
      
      // Password
      $$('.open-password').on('click', function () {
        app.dialog.password('Enter your username and password', function (password) {
          app.dialog.alert('Thank you!<br>Password:' + password);
        });
      });
      
      // Vertical Buttons
      $$('.open-vertical').on('click', function () {
        app.dialog.create({
          title: 'Vertical Buttons',
          text: 'Dialog with vertical buttons',
          buttons: [
            {
              text: 'Button 1',
            },
            {
              text: 'Button 2',
            },
            {
              text: 'Button 3',
            },
          ],
          verticalButtons: true,
        }).open();
      });
      
      // Preloader
      $$('.open-preloader').on('click', function () {
        app.dialog.preloader();
        setTimeout(function () {
          app.dialog.close();
        }, 3000);
      });
      
      // Preloader with custom text
      $$('.open-preloader-custom').on('click', function () {
        app.dialog.preloader('My text...');
        setTimeout(function () {
          app.dialog.close();
        }, 3000);
      });
      
      // Progress
      $$('.open-progress').on('click', function () {
        var progress = 0;
        var dialog = app.dialog.progress('Loading assets', progress);
        dialog.setText('Image 1 of 10');
        var interval = setInterval(function () {
          progress += 10;
          dialog.setProgress(progress);
          dialog.setText('Image ' + ((progress) / 10) + ' of 10');
          if (progress === 100) {
            clearInterval(interval);
            dialog.close();
          }
        }, 300)
      });
      
      // Progress Infinite
      $$('.open-progress-infinite').on('click', function () {
        app.dialog.progress();
        setTimeout(function () {
          app.dialog.close();
        }, 3000);
      });
    </script>
  </body>
</html>